.page {
  width: 100vw;
  height: 100vh;
}
.page .login-content {
  width: 86%;
  margin: 0 auto;
  text-align: center;
  padding-top: 40%;
  box-sizing: border-box;
}
.page .login-content .login-logo-active {
  animation: slide-left 0.5s forwards;
}
@keyframes slide-left {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-38%, -90%);
  }
}
@keyframes slide-right {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}
.page .login-content .login-page .login-logo {
  width: 150rpx;
  height: 150rpx;
  background: #ccc;
  border-radius: 32rpx;
  overflow: hidden;
  margin: 0 auto;
}
.page .login-content .login-page .login-logo img {
  width: 100%;
  height: 100%;
}
.page .login-content .login-page .login-title {
  margin: 30rpx 0;
}
.page .login-content .login-page .login-title img {
  width: 100rpx;
  height: 50rpx;
}
.page .login-content .login-page .login-text {
  letter-spacing: 20rpx;
  color: #999;
  font-size: 30rpx;
  margin: 30rpx 0;
}
.page .login-content .login-button.active {
  animation: slide-bottom 0.5s forwards;
}
@keyframes slide-bottom {
  0% {
    transform: translateY(0);
  }
  100% {
    bottom: 30%;
  }
}
.page .login-content .login-wecat {
  position: absolute;
  bottom: -350rpx;
  left: 50%;
  transform: translateX(-50%);
}
.page .login-content .login-wecat .login-wecat-text button::after {
  border: none !important;
}
.page .login-content .login-wecat .login-wecat-text button {
  width: 238rpx;
  height: 88rpx;
  background: #ffffff;
  border-radius: 44rpx;
  border: 1rpx solid #f5f5f5;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #101010;
}
.page .login-content .login-wecat .login-wecat-text .iconfont {
  font-size: 40rpx;
  color: #09bb07;
  margin-right: 10rpx;
}
.page .login-content .login-wecat img {
  width: 100rpx;
  height: 100rpx;
}
.page .login-content .login-button {
  position: fixed;
  width: 100%;
  bottom: 5%;
  left: 0;
}
.page .login-content .login-button .nut-button.active {
  background-color: #1e74fd;
  color: #fff;
}
.page .login-content .login-button .nut-button {
  display: block;
  height: 80rpx;
  width: 80%;
  background-color: #f5f5f5;
  border: none;
  margin: 30rpx auto;
}
.page .login-content .login-button .register {
  color: #999999;
  font-size: 28rpx;
}
.page .login-content .login-form {
  width: 100%;
}
.page .login-content .login-form .login-form-tab {
  display: flex;
  align-items: center;
  margin: 60rpx 0;
}
.page .login-content .login-form .login-form-tab .login-form-tab-item {
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 30rpx;
  color: #999999;
}
.page .login-content .login-form .login-form-tab .login-form-tab-item.active {
  color: #000;
  font-weight: 600;
}
.page .login-content .login-form .login-form-input .login-form-input-item {
  margin: 60rpx 0;
}
.page .login-content .login-form .login-form-input .login-form-input-item .input-userName::-webkit-input-placeholder,
.page .login-content .login-form .login-form-input .login-form-input-item .input-password::-webkit-input-placeholder {
  color: #c5c5c5;
}
.page .login-content .login-form .login-form-input .login-form-input-item .nut-input {
  padding: 20rpx 50rpx 20rpx 0 !important;
}
.page .login-content .login-form .login-form-input .login-form-input-item .forget-password {
  float: right;
  margin: 2% 2% 0 0;
  font-size: 24rpx;
  color: #c5c5c5;
}
.page .login-content .login-form .login-form-input .input-verification-password {
  display: flex;
  align-items: center;
}
.page .login-content .login-form-active {
  animation: slide-top 0.5s forwards;
}
@keyframes slide-top {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-30%);
  }
}
